import React, {useEffect, useState} from 'react';
import {
    View,
    Text,
    TextInput,
    Button,
    StyleSheet,
    ScrollView,
    Image,
    TouchableOpacity, ToastAndroid,
} from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import Icon from 'react-native-vector-icons/FontAwesome';
import {newsAdd, newsDetail, newsUpdate, uploadFile} from "../../../util/api";
import {useNavigation} from "@react-navigation/native";

const BranchUpdateScreen = (props: { navigation: any }) => {
    console.log(props);
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');
    const [images, setImages] = useState([]);
    const navigation = useNavigation();
    const newsId = props?.route?.params?.newsId;



        useEffect(() => {
            const unsubscribe = navigation.addListener(
                'focus',
                payload => {
                    getNewsById(newsId);
                }
            );
            return () => {
                unsubscribe();
            };
        }, [navigation]);


    const getNewsById = (newsId) => {
        newsDetail(newsId).then((res) => {
                setTitle(res.data.newsTitle);
                setDescription(res.data.newscontent);


            }
        )
    }

    const pickImage = () => {
        ImagePicker.launchImageLibrary(
            {mediaType: 'photo', selectionLimit: 1},
            response => {
                if (!response.didCancel) {
                    if (response.assets) {
                        setImages(response.assets);
                    }

                }
            },
        );
    };

    const submit = () => {
        if (!title) {
            ToastAndroid.show('请填写标题。', 2000);
            return;
        }
        if (!description) {
            ToastAndroid.show('请填写描述内容。', 2000);
            return;
        }
        const data = {
            'newscontent': description,
            'newsTitle': title,
            'newsid': newsId
        }
        newsUpdate(data).then((res) => {
            console.log(res);
            props.navigation.goBack();
        });
    };

    return (
        <ScrollView contentContainerStyle={styles.container}>
            <Text style={styles.label}>标题</Text>
            <TextInput style={styles.input} value={title} onChangeText={setTitle}/>

            <Text style={styles.label}>描述内容</Text>
            <TextInput
                style={[styles.input]}
                value={description}
                onChangeText={setDescription}
                multiline
            />
            <View style={{flexDirection: 'row', alignSelf: 'center'}}>
                <View
                    style={{
                        width: 75,
                        marginRight: 5,
                    }}>
                    <Button title="提交" onPress={submit}/>
                </View>
                <View style={{width: 75, marginLeft: 5}}>
                    <Button title="取消" onPress={() => props.navigation.goBack()}/>
                </View>
            </View>
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    container: {
        padding: 20,
    },
    label: {
        fontSize: 16,
        marginBottom: 5,
    },
    input: {
        borderWidth: 1,
        borderColor: 'gray',
        borderRadius: 5,
        marginBottom: 10,
        padding: 10,
    },
    button: {
        fontSize: 16,
        color: 'blue',
        marginBottom: 10,
    },
    image: {
        width: 100,
        height: 100,
        marginBottom: 10,
        margin: 2,
    },
});

export default BranchUpdateScreen;
